<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>创建数据卷</title>
    <link rel="stylesheet" type="text/css" href="../../js/layer/css/layui.css">
    <style>
        .zhanshop-form-label{
            float: left;
            width: 100%;
            text-align: left;
            line-height: 2.2em;
            color: #4d5259;
        }
        .text-pink{
            color: #f00;
        }
        .zhanshop-select{
            height: 38px;
            width: 100%;
            padding-left: 10px;
            padding-right: 10px;
            background: #fff;
            border: 1px solid #dddddd;
        }
        .layui-table{
            text-align: left;
        }
    </style>
</head>
<body>

<form class="layui-form" id="view">
    <div class="layui-tab layui-tab-brief" lay-filter="test-hash" style="text-align: center !important; position: relative;">
        <ul class="layui-tab-title" id="step-title" style="display: none;">
            <li class="layui-this" id="layui-tab0" lay-id="11">基础信息</li>
        </ul>
        <div style="height: 40px; width: 100%; position: absolute; top: 0px;"></div>
        <div class="layui-tab-content" style="padding-left: 10px; padding-right: 10px;">
            <div class="layui-tab-item layui-show">
                <div class="demo-reg-container">

                    <div class="layui-form-item">
                        <label class="zhanshop-form-label"><b class="text-pink">*</b>数据名称</label>
                        <div class="layui-input-wrap">
                            <input id="base-name" type="text" name="base[name]" value="" lay-verify="required" placeholder="请输入数据名称" autocomplete="off" class="layui-input" >
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="zhanshop-form-label"><b class="text-pink">*</b>驱动</label>
                        <div class="layui-input-wrap">
                            <select id="base-driver" class="zhanshop-select" name="base[driver]" lay-ignore>
                                <option value="">请选择</option>
                                <option value="local">local</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="zhanshop-form-label"><b class="text-pink">*</b>git地址</label>
                        <div class="layui-input-wrap">
                            <input id="git-url" type="url" name="base[giturl]" value="" lay-verify="required" placeholder="请输入git地址" autocomplete="off" class="layui-input" >
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="zhanshop-form-label"><b class="text-pink">*</b>git账号</label>
                        <div class="layui-input-wrap">
                            <input id="git-user" type="text"  name="base[gituser]" value="" lay-verify="required" placeholder="请输入git账号" autocomplete="off" class="layui-input" >
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="zhanshop-form-label"><b class="text-pink">*</b>git密码</label>
                        <div class="layui-input-wrap">
                            <input id="git-pwd" type="text"  name="base[gitpwd]" value="" lay-verify="required" placeholder="请输入git密码" autocomplete="off" class="layui-input" >
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <button type="button" lay-submit lay-filter="from-submit" class="layui-btn layui-btn-sm">确&nbsp;&nbsp;&nbsp;认</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</form>



<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="../../js/layer/layui.js"></script>
<script>
    ready(function() {
        layui.use(['zhanshop'], function(){
            $ = layui.$;
            zhanshop = layui.zhanshop;
            form = layui.form;
            var menuId = 'Cloudvolume';//parent.layui.zhanshop.getParam('_id');

            // 添加表单表格
            window.tableFromAdd = function (putDom){
                if($("#"+putDom).find("tr").length > 10){
                    return zhanshop.alert("端口限制上限为10个", 'danger');
                }
                var html = $("#"+putDom).find("tr").eq(0).prop('outerHTML');
                $("#"+putDom).append(html);
            }
            // 删除表单表格
            window.tableFromDel = function (putDom, obj){
                if($("#"+putDom).find("tr").length == 1){
                    return zhanshop.alert("必须保留一条", "danger");
                }
                $(obj).parent().parent().remove();
            }

            $(document).on('click', '.step-prev', function() {
                var stepLi = $("#step-title").find("li");
                for(var i in stepLi){
                    var li = stepLi[i]
                    if(li.className == "layui-this"){
                        var index = parseInt(i) - 1;
                        $("#layui-tab"+index).click();
                        break;
                    }
                }
            });



            $(document).on('click', '.step-next', function() {
                var showContent = $(".layui-show").eq(0);
                var allPass = true;

                var inputs = showContent.find("input");
                for(var i in inputs){
                    var isValid = form.validate('#'+inputs[i].id);  // 主动触发验证，v2.7.0 新增
                    if(isValid == false){
                        allPass = false;
                        return false;
                    }
                }

                var textareas = showContent.find("textarea");
                for(var i in textareas){
                    var isValid = form.validate('#'+textareas[i].id);  // 主动触发验证，v2.7.0 新增
                    if(isValid == false){
                        allPass = false;
                        return false;
                    }
                }

                var selects = showContent.find("select");
                for(var i in selects){
                    var isValid = form.validate('#'+selects[i].id);  // 主动触发验证，v2.7.0 新增
                    if(isValid == false){
                        allPass = false;
                        zhanshop.alert($('#'+selects[i].id).data("title")+"不能为空", "danger");
                        return false;
                    }
                }

                if(allPass){
                    var stepLi = $("#step-title").find("li");
                    for(var i in stepLi){
                        var li = stepLi[i]
                        if(li.className == "layui-this"){
                            var index = parseInt(i) + 1;
                            $("#layui-tab"+index).click();
                            break;
                        }
                    }
                }
            });

            // 提交事件

            form.on('submit(from-submit)', function(data){

                var submitData = data.field; // 获取表单字段值
                // 我这里不要走json了
                layui.zhanshop.ajax(API_ADDRESS+apiUrlTable+'/'+menuId, 'POST', submitData, {}, function(res){
                    return layui.zhanshop.alert('操作成功', 'success', function(){
                        parent.window.location.reload();
                    });
                },function(xhr){
                    return layui.zhanshop.alert(xhr.responseJSON.msg ? xhr.responseJSON.msg : xhr.statusText, 'danger');
                }, true, apiFromJson);
                return false; // 阻止默认 form 跳转

            });
        });
    });
</script>

</body>
</html>